<template>
	<view>
		<!-- 订单状态 -->
		<div class="info-view order-view">
			<div class="order-status">
				未付款
				<div>商品暂未付款</div>
			</div>

		</div>
		<!-- 物流信息 -->
		<view class="info-view logistics-view">
			<view class="logistics-List">
				<view class="logistics-List-title">
					您的商品已经下单
				</view>
				<view class="logistics-List-time">
					请立刻到 xxx 地方领取
				</view>
			</view>
			<!-- <view class="logistics-List-title">
				{{ '暂无物流信息' }}
			</view> -->
		</view>
		<!-- 地址 -->
		<view class="info-view">
			<view class="address-view">
				<view>
					<view class="address-title">
						<span>王某某</span>
						<span>13000000000</span>
					</view>
					<view class="address">
						地址：xxxxxxxxxxxxxxxxxxxx
					</view>
				</view>
			</view>
		</view>

		<!-- 提货地址 -->
		<view class="info-view">
			<view class="address-view">
				<view>
					<view class="order-info-view">
						<view class="title">自提点地址:</view>
						<view class="value address-line-height">xxxx地方</view>
					</view>
					<view class="order-info-view" @click="callPhone">
						<view class="title">联系方式:</view>
						<view class="value">
							13000000000
							<u-icon name='phone-fill'></u-icon>
						</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view>
			<view class="seller-view">
				<!-- 店铺名称 -->
				<view class="seller-info u-flex u-row-between">
					<view class="seller-name" @click="goToShopPage()">
						<view class="name">xxx商店</view>
						<view class="status">未付款</view>
					</view>
					<view class="order-sn"></view>
				</view>
				<view>
					<view v-for="(sku, skuIndex) in 2" :key="skuIndex">
						<view class="goods-item-view">
							<view class="goods-img" @click="gotoGoodsDetail()">
								<u-image border-radius="6" width="131rpx" height="131rpx"
									src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/0f423fb60f084b2caade164fae25a9a0.png">
								</u-image>
							</view>
							<view class="goods-info" @click="gotoGoodsDetail()">
								<view class="goods-title u-line-2">商品名字</view>
								<view class="goods-price">
									￥111
								</view>
							</view>
							<view class="goods-num">
								<view>x2</view>
								<view class="good-complaint">
									<u-tag size="mini" mode="plain" @click="complaint()" text="投诉" type="info" />
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="info-view">
			<view>
				<view class="order-info-view">
					<view class="title">商品总价：</view>
					<view class="value">￥111</view>
				</view>
				<view class="order-info-view">
					<view class="title">商品单价：</view>
					<view class="value">￥111</view>
				</view>
				<view class="order-info-view">
					<view class="title">商品数量：</view>
					<view class="value">x 1</view>
				</view>

			</view>
		</view>
		<!-- 客户服务-->
		<view class="info-view">
			<view style="width: 100%">
				<view class="order-info-view">
					<view class="title">服务</view>
				</view>
				<view class="customer-list">
					<view class="customer-service" @click="contact()">联系客服</view>
				</view>
			</view>
		</view>
		<view class="info-view">
			<view style="width: 100%">
				<view class="order-info-view">
					<view class="title">订单编号：</view>
					<view class="value">
						xxxxxxxxxx
						<u-tag class="copy" text="复制" type="info" size="mini" @click="onCopy()" />
					</view>
				</view>
				<view class="order-info-view">
					<view class="title">下单时间：</view>
					<view class="value">2023-09-08 11:11:11</view>
				</view>
				<view class="order-info-view">
					<view class="title">订单备注：</view>
					<view class="value">暂无备注</view>
				</view>
				<view class="order-info-view">
					<view class="title">支付状态：</view>
					<view class="value">
						已付款
					</view>
				</view>
				<view class="order-info-view">
					<view class="title">支付方式：</view>
					<view class="value">微信</view>
				</view>
			</view>
		</view>
		<view class="bottom_view">
			<view class="btn-view u-flex u-row-between">
				<view class="description">
					<text>应付金额：</text>
					<text class="price">￥123</text>
				</view>
				<view>
					<u-button type="error" ripple size="mini" @click="toPay()">立即付款</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				lightColor: this.$lightColor,
			};
		},
		onLoad(options) {

		},
		methods: {
			//联系客服
			contact() {
				console.log('联系客服')
			},

			onCopy() {
				console.log('触发了复制')
			},
			// 去支付
			toPay(val) {
				console.log('去支付')
			},

			callPhone() {
				console.log('点击了电话')
			},

			gotoGoodsDetail() {
				uni.navigateTo({
					url: `/pages/product/goods`,
				});
			},

			/**
			 * 投诉
			 */
			complaint(sku) {
				uni.navigateTo({
					url: "/pages/order/complain/complain"
				});
			},

			goToShopPage() {
				uni.navigateTo({
					url: "/pages/product/shopPage" ,
				});
			},
		},
	};
</script>

<style lang="scss">
	@import "./goods.scss";

	.empty {
		width: 100%;
	}

	.customer-service {
		background: #ededed;
		// padding: 12rpx 40rpx;
		width: 48%;
		margin: 0 1%;
		height: 55rpx;
		line-height: 55rpx;
		margin-bottom: 10rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 10rpx;
	}

	.customer-list {
		display: flex;
		flex-wrap: wrap;
	}

	.logistics-view {
		justify-content: space-between;
		padding: 30rpx !important;
		margin: 0 !important;
		transform: translateY(-10px);
	}

	.order-status {
		color: #fff;
		width: 100%;
		text-align: center;
		font-size: 36rpx;
		margin-top: 40rpx;

		>div {
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	}

	.logistics-List-title {
		margin-bottom: 10rpx;
		font-size: 26rpx;
	}

	.logistics-List-time {
		font-size: 24rpx;
		color: #999;
	}

	.info-detail {
		margin-right: 30rpx;
		color: #333;
	}

	.order-view {
		margin: 0 !important;
		border-radius: 0 !important;
		width: 100%;
		height: 200rpx;
		padding: 0 !important;
		background-image: linear-gradient(to right,
				$light-color 0%,
				$aider-light-color 100%) !important;
	}

	page,
	.content {
		background: #f1f1f1;
		height: 100%;
	}

	.info-line {
		align-items: center;
		display: flex;
		border-radius: 30rpx;
		flex-direction: row;
		justify-content: space-between;
		background-color: #fff;
		width: 100%;
		height: 110rpx;
		color: #333333;
		font-size: 28rpx;
		border-bottom: 1rpx solid #eeeeee;

		.info-title {
			margin: 0 30rpx;
			padding: 16rpx 0rpx;
		}
	}

	.seller-view {
		margin: 20rpx 0;
		padding: 15rpx 0;
		border-radius: 30rpx;
	}

	.address-title {
		font-size: 26rpx;
		font-weight: bold;

		>span {
			margin-right: 20rpx;
		}
	}

	.info-view {
		display: flex;
		margin: 0 0 20rpx 0;
		border-radius: 30rpx;
		flex-direction: row;
		padding: 15rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #fff;

		.address-view {
			display: flex;
			flex-direction: row;
			padding: 16rpx 0;

			.address {
				color: $font-color-light;
				overflow: hidden;
				line-height: 1.75;
				font-size: 22rpx;
			}
		}

		.order-info-view {
			line-height: 60rpx;
			display: flex;
			flex-direction: row;
			width: 100%;
			margin: 10rpx 0rpx;

			.title {
				color: #666;
				width: 140rpx;
				font-size: 24rpx;
				font-weight: 600;
				flex: 3;
				min-width: 160rpx;
			}

			.value {
				color: #666;
				font-size: 24rpx;
				flex: 10;
			}

			.copy {
				font-size: 20rpx;
				color: #333;
				border: 1px solid #dddddd;
				margin-left: 30rpx;
			}
		}

		.invoice-info-view {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			margin: 10rpx 0rpx;

			.invoice-title {
				width: 550rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.value {
				color: $font-color-light;
			}
		}
	}

	.verificationCode {
		font-weight: bold;
		letter-spacing: 2rpx;
	}

	.bottom_view {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;

		.btn-view {
			padding: 0 30rpx;
			line-height: 100rpx;
			font-size: 26rpx;

			.description {
				color: #909399;
				size: 25rpx;

				.price {
					color: $main-color;
				}
			}
		}

		.cancel-btn {
			color: #999999;
			border-color: #999999;
			margin-left: 15rpx;
			height: 60rpx;
		}
	}

	.cancel-popup {
		.header {
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin: 15rpx 0rpx;
		}
	}

	.address-line-height {
		line-height: 1.75;
	}

	.seller-name {
		>.name {
			flex: 10 !important;
		}

		>.status {
			flex: 2;
		}
	}
</style>
